// 该文件中的变量是全局变量，在css文件和vue组件中可以直接使用
$mainColor: #1a1a1a; // 网站右侧主窗口题色
// $mainColor: #5e9fe1; // 网站右侧主窗口题色
// 侧边栏
$menuBg: #304156; // 菜单背景颜色
$menuTextColor: #fff; // 菜单文字颜色
$menuActiveTextColor: $mainColor; // 已选中菜单文字颜色
$menuActiveBg: none; // 已选中菜单背景颜色
$menuHover: #263445; // 鼠标经过菜单时的背景颜色
$subMenuBg: #1f2d3d; // 子菜单背景颜色
$subMenuHover: #001528; // 鼠标经过子菜单时的背景颜色
$collapseMenuActiveBg: #1f2d3d; // 菜单宽度折叠后，已选中菜单的背景颜色
$collapseMenuActiveColor: $menuTextColor; // 菜单宽度折叠后，已选中菜单的文字颜色
$collapseMenuActiveBorderColor: $mainColor; // 菜单宽度折叠后，已选中菜单的边框颜色
$collapseMenuActiveBorderWidth: 2px; // 菜单宽度折叠后，已选中菜单的边框宽度
$arrowColor: #909399; // 展开/收起箭头颜色
$horizontalMenuHeight: 40px; // 菜单栏水平排列时候的高度


// 全元素样式
/* 基础样式 */

a,
span,
h1,
h2,
h3,
h4,
h5,
h6 {
    // display: inline-block; /* 使元素支持 `transform` 动画 */
    // transition: all 0.3s ease;
    /* 平滑过渡效果 */
    cursor: pointer;
    /* 鼠标悬浮时显示手型 */
    &:hover {
        transform: scale(1.05);
        /* 放大 3% */
        // color: #80ff80;
        /* 改变字体颜色 */
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        filter: brightness(1.1) contrast(1.1) saturate(1.1);
        /* 添加轻微阴影 */
    }
    &:active {
        transform: scale(1.01);
        text-shadow: 0 2px 4px rgba(1, 1, 1, 0.1);
    }
}
:root {
    --mainColor: #1a1a1a; // 默认主题色
  }
  
  body {
    background-color: var(--mainColor);
  }

/* 悬浮效果 */

// 全屏样式
#app .Fullscreen {
    display: none;
}

#app .right .main .fullscreenbtnCss {
    position: absolute;
    top: 5px;
    right: 10px;
    cursor: pointer;
    display: inline-block;
    background: rgba(212, 212, 212, 0.001);
    color: rgba(128, 128, 128, 0.01);
    font-size: 0.5em  ;
    z-index: +1;
    &:hover {
        // background: rgba(26, 5, 119, 0.749);
        background: #304156;
        color: #fff;
    }
    &:active {
        background: #304e56;
    }
}


 .grid-itemImg{
    filter: contrast(1.0) brightness(1.0) saturate(1.0);
    transform: scale(0.8);

}
#app .grid-container .grid-item .image-container h3 {
    // text-align: center;
    // bottom: 10px;
    // padding-top:3em ;
    filter: contrast(1) brightness(1) saturate(1);
  }


//   @media screen and (display-mode: fullscreen) {
    #app .left {
        .logo{
            transform: scale(1);
            animation: 0.4s;
            transition: all 0.4s ease;
        } 
        &.collapse{
            .logo{
                transform: scale(0.3);
                animation: 0.4s;
                transition: all 0.4s ease;
            } 

        }
    }



    *{
        user-select: none;
    }

    #main-FullscreenBtn{
        z-index: +10;
    }